<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="multiple">
        <input type="checkbox" name="chooses" value="apple">apple
        <input type="checkbox" name="chooses" value="orange">orange
        <input type="checkbox" name="chooses" value="banana">banana
    </div>
    <p class="p1"></p>
    <div>
        <input type="text" class="username">
    </div>
</body>
<script>
    //onchange获取多选框的值
    var multiple=document.getElementById('multiple')
    multiple.onchange = function () {
        var str=''
        var index=0
        var chooes=multiple.children
        var len=chooes.length
        for (let i = 0; i < len; i++) {
            if (chooes[i].checked){
                index++
                str+=index+':'+chooes[i].value+' ';
            }
        }
        var p =document.querySelector('.p1')
            p.innerText=str
    }
    //
        var username=document.querySelector('.username')
        username.onfocus = function () {
            username.setAttribute("placeholder", "请输入内容")
        }
        username.onblur=function(){
            username.removeAttribute("placeholder")
        }
</script>
</html>